<template>
	<div class="register">
		<!-- <form action="" @submit.prevent="register">
			<lable for="">
				<span>邮箱地址：</span>
				<input type="email" v-model="user.account">
			</lable>
			<lable for="">
				<span>邮箱密码：</span>
				<input type="password" v-model="user.password">
			</lable>
			<lable for="">
				<span>邮箱验证码：</span>
				<input type="text" v-model="user.emailCode">
				<button class="get-email-btn" @click="getEmailCode" type="button">获取邮箱验证码</button>
			</lable>
			<lable for="">
				<span>验证码：</span>
				<input type="text" v-model="user.code">
				<img :src="imgCodeShow" @click="refreshImgCode" alt="">
			</lable>
			<button type="submit" class="register-btn">提交</button>
		</form> -->
		<a-row>
			<a-col :sm="col.xs" :offset="col.offset">
				<a-form :model="user" :rules="rules" @submit.prevent="register" :labelCol="{span:4}">
					<a-divider>用户注册</a-divider>
					<a-form-item label="邮箱地址:" name="account">
						<a-input-group compact>
							<a-input type="email" autocomplete="new-password" v-model:value.trim="user.account" style="width: 70%;" />
							<a-button html-type="button" type="primary" :disabled="isEmail" :loading="getEmailCodeLoading" @click="getEmailCode()" style="width: 30%;">发送验证码</a-button>
						</a-input-group>
					</a-form-item>
					<a-form-item hasFeedback label="邮箱验证:" name="emailCode">
						<a-input autocomplete="new-password" v-model:value.trim="user.emailCode" />
					</a-form-item>
					<a-form-item hasFeedback label="设置密码:" name="password">
						<a-input-password type="password" autocomplete="new-password" v-model:value.trim="user.password" />
					</a-form-item>
					<a-form-item hasFeedback label="确认密码:" name="affirmPassword">
						<a-input-password type="password" autocomplete="new-password" v-model:value.trim="user.affirmPassword" />
					</a-form-item>
					<a-form-item label="验证码:" required>
						{{user.code}}
						<a-button html-type="button" type="primary" @click="showVisible">加载验证码</a-button>
					</a-form-item>
					<a-row>
						<a-col :span="20" :offset="4">
							<a-form-item>
								<a-button html-type="submit" type="primary" :loading="registerLoading" block>注册</a-button>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-col>
		</a-row>
		<a-modal v-model:visible="visible" title="图形验证码" cancelText="取消" okText="确定" @ok="backOk" @cancel="backCancel">
			<a-row>
				<a-col :span="20">
					<a-input autocomplete="off" v-model:value.trim="user.code" type="text" />
				</a-col>
				<a-col :span="4">
					<a-image @click="refreshImgCode" :src="imgCodeShow" :preview="false" :height="40" />
				</a-col>
			</a-row>
		</a-modal>
	</div>
</template>

<script>
	import {email_register,get_email_code} from "@/commonApi"
	import {rules,_patternRules,warning,success} from "@/antd"
	import pub from "@/lib"

	export default {
		name: "Register",
		data() {
			return {
				getEmailCodeLoading:false,
				registerLoading:false,
				col:{
					xs:8,
					offset:8
				},
				visible: false,
				imgCodeShow: 'https://www.semei.net/BookApi/Sms/Sms.php?s=imgCodeShow',
				user: {
					account: '',
					code: '',
					emailCode: '',
					password: '',
					affirmPassword: ''
				}
			}
		},
		methods: {
			backOk(){
				this.visible = false;
			},
			backCancel(){
				this.user.code = ''
			},
			getEmailCode() {
				this.getEmailCodeLoading = true
				get_email_code(this.user.account)
					.then(() => {
						success('已发送验证码')
						this.getEmailCodeLoading = false
					}).catch((err)=>{
						warning(err)
						this.getEmailCodeLoading = false
					})
			},
			refreshImgCode() {
				this.user.code = ''
				this.imgCodeShow = `https://www.semei.net/BookApi/Sms/Sms.php?s=imgCodeShow&timestamp=${+new Date()}`
			},
			showVisible() {
				this.visible = true
				this.imgCodeShow = `https://www.semei.net/BookApi/Sms/Sms.php?s=imgCodeShow`
			},
			register() {
				this.registerLoading = true
				email_register(this.user)
					.then((res) => {
						console.log(res)
						if(res.uid){
							success('用户注册成功')
							this.registerLoading = false
							this.$router.push('/login')
						}
					}).catch((err)=>{
						warning(err)
						this.refreshImgCode()
						this.registerLoading = false
					})
			}
		},
		created() {

		},
		mounted() {
			setInterval(() => {
				this.refreshImgCode()
			}, 120000);
			this.col = pub.windowResize(this.col)
			window.addEventListener('resize',this.$_.debounce(()=>{
				this.col = pub.windowResize(this.col)
			},150))
		},
		computed: {
			rules: function() {
				return rules(this.user)
			},
			isEmail: function() {
				return !_patternRules.isEmail.pattern.test(this.user.account)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .register {
	// 	form {
	// 		width: 500px;
	// 		padding: 20px;
	// 		box-sizing: border-box;
	// 		margin: 0 auto;
	// 		border: 1px solid #999;
	// 		border-radius: 10px;
	// 		text-align: left;

	// 		lable {
	// 			display: flex;
	// 			margin: 10px 0;

	// 			span {
	// 				display: block;
	// 				width: 100px;
	// 				line-height: 40px;
	// 				text-align: right;
	// 			}

	// 			input {
	// 				width: 300px;
	// 				height: 40px;
	// 				border: 1px solid #999;
	// 			}

	// 			input[type="text"] {
	// 				width: 150px;
	// 			}

	// 			.get-email-btn {
	// 				height: 40px;
	// 				line-height: 40px;
	// 			}
	// 		}

	// 		.register-btn {
	// 			display: block;
	// 			width: 80%;
	// 			height: 40px;
	// 			background-color: #0195FA;
	// 			color: white;
	// 			border: none;
	// 			border-radius: 5px;
	// 			margin: 0 auto;
	// 			margin-top: 20px;
	// 		}

	// 		.register-btn:hover {
	// 			opacity: 0.8;
	// 		}
	// 	}
	// // }
	// form {
	// 	width: 500px;
	// 	padding: 30px;
	// 	box-sizing: border-box;
	// 	border: 1px solid #999;
	// 	border-radius: 10px;
	// }
</style>
